<mat-card class="page-title">
    <div class="btn-toolbar float-left" role="toolbar">
        <a mat-icon-button (click)="globalService.toggleSideNav()">
            <mat-icon color="primary">menu</mat-icon>
        </a>
    </div>
    <span>文稿</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <button  *ngIf="!canEdit" mat-icon-button (click)="goBack()" matTooltip="返回">
            <mat-icon color="primary">arrow_back</mat-icon>
        </button>
        <button  *ngIf="canEdit" mat-icon-button (click)="saveArticle()" matTooltip="提交">
            <mat-icon color="primary">save</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card *ngIf="article">
    <div *ngIf="mode !== 'view'">
        <mat-form-field style="font-size:24px; width: 95%">
            <input matInput type="text" placeholder="标题" [(ngModel)]="article.title">
        </mat-form-field>
    </div>
    <h4 *ngIf="mode === 'view'">
        {{article.title}}
    </h4>
    <p>
        起草人： {{article.authorName || article.authorLogin}}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        发布时间： {{article.createdDate | date: 'yyyy-MM-dd HH:mm'}}
    </p>
</mat-card>

<mat-card *ngIf="article">
    <div>
        <mat-form-field>
            <input matInput type="text" placeholder="主题1" [(ngModel)]="article.subject1" [disabled]="mode === 'view'">
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput type="text" placeholder="主题2" [(ngModel)]="article.subject2" [disabled]="mode === 'view'">
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput type="text" placeholder="主题3" [(ngModel)]="article.subject3" [disabled]="mode === 'view'">
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput type="number" placeholder="显示控制" [(ngModel)]="article.displayOrder" min=0 [disabled]="mode === 'view'">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
            <input matInput type="text" placeholder="关键词" [(ngModel)]="article.tag1" [disabled]="mode === 'view'">
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput type="text" placeholder="关键词" [(ngModel)]="article.tag2" [disabled]="mode === 'view'">
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput type="text" placeholder="关键词" [(ngModel)]="article.tag3" [disabled]="mode === 'view'">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field style="width: 640px">
            <input matInput type="text" placeholder="摘要" [(ngModel)]="article.summary" maxlength=250 [disabled]="mode === 'view'">
        </mat-form-field>
    </div>
</mat-card>

<mat-card *ngIf="article" style="margin-bottom: 50px">
    <div style="font-size: larger">
        <span>正文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <a (click)="enterEdit()" matTooltip="编辑" *ngIf="canEdit && !isEditing">
            <span class="fa fa-edit" style="color: #673ab7"></span>
        </a>
        <a (click)="preview()" matTooltip="预览" *ngIf="canEdit && isEditing">
            <span class="fa fa-eye" style="color: #673ab7"></span>
        </a>
    </div>

    <br>
    <div *ngIf="article && isEditing">
        <ueditor [(ngModel)]="article.content"
                 [config]="{ wordCount: true }"
                 [loadingTip]="'加载中……'"
                 (onReady)="_ready($event)"
                 (onDestroy)="_destroy()"
                 (ngModelChange)="_change($event)">
        </ueditor>
        <br><br>
    </div>
    <div *ngIf="article && !isEditing">
        <div [innerHTML]="article.content | html">
        </div>
        <br><br>
    </div>
</mat-card>

